<template>
  <el-table 
        :data="tableData" 
        v-loading="tableLoading" 
        :border="border"
        class="list">
      <el-table-column 
          v-for="(item,index) in columns" 
          :label="item.label" 
          :width="item.width"
          :align="item.align?item.align:'center'"
          :prop="item.prop">
          <template v-slot="{row}">
        <slot :name="item.prop" :row="row">
            {{getProp(row,item)}}
        </slot>
      </template>
      </el-table-column>
  </el-table>
</template>
<script setup>
//处理传递的属性名是xxx[0].xx
let getProp = (row, item) => {
    // console.log(item.prop)
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}

  let props=defineProps({
    'tableData':{
        type:Array
    },
    'columns':{
        type:Array
    },
    "tableLoading":{
        type:Boolean,
        default(){
            return false
        }
    },
    "border":{
      type:Boolean,
      default(){
        return true
      }
    }
  })
//   使用方式
//   给表格传递的属性
//   1.tableData 表格对应的数据
//   2.columns 每一列的数据描述，动态表头等待
//   columns 传递类型      属性
//            数组[]   label：""表头"，prop"数据对应的字段"，"width"， "align"
//   插槽：
//   通过指定 具名插槽 具名（同colums中的prop）可以自定义表格的内容



  </script>

<style lang="scss" scoped>
  .list {
    :deep(.cell) {
      text-align: center;
      padding:20px 20px;
    }
    :deep(.el-table__header .cell) {
      padding:30px 20px;
      font-weight: 900;
    }
  }
  
  </style>